<template>
	<view class="box">
		<view class="head">
			<u-icon name="map-fill" size="45" color="white"></u-icon>
			<u-icon name="bell" size="45" color="white"></u-icon>
		</view>
		<view class="search">
			<u-search placeholder="搜索项目" v-model="keyword" :show-action="false" bg-color="white" ></u-search>
		</view>
		<!-- 轮播图 -->
		<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item ,index) in info" :key="index">
					<view class="swiper-item">
						{{item.content}}
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<text class="title">养老公告</text>
		<view class="vediopart" v-for="(item,index) in vedioList" :key="index">
			<image :src="item.scr"></image>
			<view>
				<text class="vediotitle">{{item.name}}</text>
				<text class="time">{{item.time}}</text>
			</view>
		</view>
		<view style="width: 100%;height: 20rpx;"></view>

		<!-- 卡片列表 -->
		<uni-card sub-title="副标题" extra="额外信息" :thumbnail="avatar" @click="onClick">

		</uni-card>
		<uni-card  sub-title="副标题" extra="额外信息" :thumbnail="avatar" @click="onClick">
			<template v-slot="title">
				<span style="color: red;">hhh</span>
			</template>
		</uni-card>
		<uni-card  sub-title="副标题" extra="额外信息" :thumbnail="avatar" @click="onClick">
			<template v-slot="title">
				<span style="color: red;">hhh</span>
			</template>
		</uni-card>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
					href: 'https://uniapp.dcloud.io/component/README?id=uniui',
					info: [{
						content: '内容 A'
					}, {
						content: '内容 B'
					}, {
						content: '内容 C'
					}],
					current: 0,
					mode: 'round',
					vedioList:[{
						scr:'https://tse3-mm.cn.bing.net/th/id/OIP-C.YyH5w3ZqmvaeZkUBy5B--AAAAA?w=190&h=271&c=7&r=0&o=5&dpr=1.5&pid=1.7',
						name:'破壁机养生食谱',
						time:'2022/05/30  10:10:10'
					},
					{
						scr:'https://tse1-mm.cn.bing.net/th/id/OIP-C.8-xpNDce84vy5mAuHOlU5QHaEz?w=196&h=127&c=7&r=0&o=5&dpr=1.5&pid=1.7',
						name:'100种煲汤方法',
						time:'2022/06/01  09:55:10'
					},
					{
						scr:'https://img95.699pic.com/photo/50106/2744.jpg_wh300.jpg',
						name:'200种煲汤方法',
						time:'2022/03/31  11:10:08'
					}]
				}
			},
			methods: {
				onClick(e) {
					// 切换tabBar
					uni.switchTab({
						url:"/pages/index/index"
					})
					console.log(e)
				},
			}
		}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
		background-color: white;
		.head {
			width: 100%;
			height: 6vh;
			display: flex;
			padding-left: 6%;
			padding-right: 6%;
			justify-content: space-between;
			background-color: #ff9900;
			position: sticky;
			top: 0;
			z-index: 1;
		}
		.search{
			width: 100%;
			height: 80rpx;
			background-color: #ff9900;
			position: sticky;
			top: 6vh;
			z-index: 1;
		}
		.title{
			font-size: 35rpx;
			padding-left: 5%;
			padding-top: 1%;
		}
		.vediopart{
			width: 90%;
			height:250rpx;
			margin: auto;
			display: flex;
			margin-top: 2%;
			image{
				width: 45%;
				height: 100%;
			}
			view{
				display: flex;
				flex-direction: column;
				width: 55%;
				.vediotitle{
					font-size: 35rpx;
					padding-top: 25%;
					padding-left: 8%;
				}
				.time{
					font-size: 25rpx;
					padding-top: 2%;
					padding-left: 8%;
					color: gray;
				}
			}
		}
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-search{
		width: 90%;
		padding-left: 10%;
	}
</style>